<!-- eslint-disable vue/no-mutating-props -->
<template>
  <div class="box">
    <h1 class="title">创建新的迁移任务</h1>
    <el-form ref="form" :model="data" :rules="rules">
      <el-row :gutter="20">
        <el-col
          v-for="item in formElData"
          :key="item.dataName"
          :span="item.span"
        >
          <formItemVue :data="item" :form="data" />
          <el-col v-if="item.inlineEl && item.inlineEl.length > 0" :span="1">
            <i
              class="el-icon-right"
            /></el-col>
          <template v-if="item.inlineEl && item.inlineEl.length > 0">
            <formItemVue
              v-for="items in item.inlineEl"
              :key="items.dataName"
              :data="items"
              :form="data"
            />
          </template>
        </el-col>
      </el-row>
    </el-form>
  </div>
</template>

<script>
import Vue from 'vue'
import { stepOneData } from './data'
import formItemVue from '@/components/FormItem/index.vue'

export default {
  name: 'TaskSelectMigrationOne',
  components: { formItemVue },
  // eslint-disable-next-line vue/require-prop-types
  props: ['data'],
  data: function() {
    return {
      rules: {},
      formElData: []
    }
  },
  created() {
    this.formElData = stepOneData
    this.getRules(this.formElData)
  },
  mounted() {},
  methods: {
    getRules(data) {
      const that = this
      if (!data) {
        return
      }
      data.forEach((f) => {
        this.rules[f.dataName] = f.rules
          ? f.rules
          : [
            {
              required: true,
              message: `请输入${f.label}`,
              trigger: 'change'
            }
          ]
        if (!that.$props.data[f.dataName]) {
          Vue.set(that.$props.data, f.dataName, f.defaultValue || '')
          if (f.inlineEl && f.inlineEl.length > 0) {
            that.getRules(f.inlineEl)
            return
          }
        }
      })
    }
  }
}
</script>

<style lang="scss" scoped>
.box{
  width: 70%;
  margin: 0 auto;
}

.title {
  color: #333;
  font-size: 22px;
  line-height: 1.25;
  font-family: alimama, webfont-notdef;
  font-size: 18px;
  box-sizing: border-box;
  font-weight: 600;
  text-align: left;
}

::v-deep .el-col {
  display: flex;
  align-items: center;
}

::v-deep .el-form-item {
  margin-bottom: 0 !important;
  padding: 10px 0;
}

::v-deep .el-form-item__label {
  font-family: alimama, webfont-notdef;
  color: #333;
}
</style>
